<template>
  <div>
    <h1>{{ h1Content }}</h1>
    <button @click="sub">-</button>
    <span v-text="num"></span>
    <button @click="add">+</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const num = ref(1);
const h1Content = ref('当前数值为:1');

const add = () => {
  if (num.value < 10) {
    num.value++;
  } else {
    alert('数值不能超过10');
  }
};

const sub = () => {
  if (num.value > 0) {
    num.value--;
  } else {
    alert('数值不能小于0');
  }
};

watch(num, (newVal) => {
  h1Content.value = `当前数值为：${newVal}`;
});
</script>

<style scoped>
button {
  margin: 0 5px;
}
span {
  display: inline-block;
  width: 30px;
  text-align: center;
}
</style>